<template>
  <div>
    <div class="report-sale-item" :key="reportSaleItemKey">
      <div class="report-sale-item-title">
        <div class="report-sale-item-title-left subheading-heavy">
          <span class="paragraph-p1-heavy">{{ item.startDate + '-' + item.endDate }}</span>
          <span v-if="item.active" class="paragraph-p2-heavy margin-left-4 color-red">· 进行中</span>
        </div>
        <div v-if="orderDetailUrl" class="report-sale-item-title-right div-align-justify-center paragraph-p3-light color-grey"
             @click="$router.push(orderDetailUrl + '?userId=' + userId
             + '&startDate=' + item.startDate + '&endDate=' + item.endDate + '&active=' + item.active)">
          订单详情
        </div>
      </div>
      <div class="report-sale-item-content">
        <div class="report-sale-item-count">
          <div class="paragraph-p2-light color-grey">{{ fieldTitle[0] }}</div>
          <div class="subheading-heavy">{{ item.fieldValue[0] }}</div>
        </div>
        <div class="report-sale-item-money">
          <div class="paragraph-p2-light color-grey">{{ fieldTitle[1] }}</div>
          <div class="subheading-heavy">{{ '¥' + item.fieldValue[1] }}</div>
        </div>
        <div class="report-sale-item-profit">
          <div class="paragraph-p2-light color-grey">{{ fieldTitle[2] }}</div>
          <div class="subheading-heavy">{{ '¥' + item.fieldValue[2] }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getCurrentMonthSaleSummary, viewTraderSaleSummaryTotal} from "@/request/api";
import {Toast} from "vant";

const fieldTitleArray = [
  ['销售量', '销售额(¥)', '毛利(¥)'],
  ['销售量', '业绩($)', '提成($)']
]
export default {
  name: "ReportSaleItem",
  props: {
    item: { type: Object, default: () => ({
        startDate: String,
        endDate: String,
        fieldValue: Array,
        active: { type: Boolean, default: () => false },
        showDetail: { type: Boolean, default: () => true },
      })
    },
    orderDetailUrl: { type: String, default: () => ('') },
    showTotal: { type: Boolean, default: () => false },
  },
  components:{},
  data() {
    return{
      reportSaleItemKey: new Date().getTime(),
      userId: this.$route.query.userId ? this.$route.query.userId : this.$baseJS.getLoginUser().id,
      fieldTitle: this.orderDetailUrl ? fieldTitleArray[1] :  fieldTitleArray[0]
    }
  },
  mounted() {
    if (this.showTotal) {
      if (this.$baseJS.getLoginUser().isAdmin) {
        this.viewTraderSaleSummaryTotal()
      } else {
        this.viewTraderSaleSummaryTotal()
      }
    }
  },
  methods: {
    getCurrentMonthSaleSummary() {
      getCurrentMonthSaleSummary().then(res => {
        const { State, Data, Msg } = res
        if (State) {
          const { start_date, end_date, sale_count, retail_total, commission } = Data
          this.item.startDate = start_date
          this.item.endDate = end_date
          this.item.fieldValue.push(sale_count)
          this.item.fieldValue.push(retail_total)
          this.item.fieldValue.push(commission)
        } else { Toast(Msg) }
      })
    },
    viewTraderSaleSummaryTotal() {
      this.$loading.show()
      const queryUserId = this.$route.query.userId
      let param = {
        pathParam: queryUserId ? queryUserId : this.$baseJS.getLoginUser().id
      }
      viewTraderSaleSummaryTotal(param).then(res => {
        const { State, Data, Msg } = res
        if (State) {
          const { start_date, end_date, sale_count, retail_total, commission } = Data
          this.item.startDate = start_date
          this.item.endDate = end_date
          this.item.fieldValue.push(sale_count)
          this.item.fieldValue.push(retail_total)
          this.item.fieldValue.push(commission)
          this.reportSaleItemKey = new Date().getTime()
        } else { Toast(Msg) }
        this.$loading.close()
      }).catch(() => this.$loading.close())
    },
  },
}
</script>

<style scoped>
.report-sale-item {
  height: 110px;
}
.report-sale-item-title {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 8px 16px 0 0;
}
.report-sale-item-title-left {
  width: 80%;
  height: 24px;
  margin-left: 16px;
}
.report-sale-item-title-right {
  height: 18px;
  width: 20%;
  text-align: right;
  text-decoration:underline;
}
.report-sale-item-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 16px;
}
.report-sale-item-count {
  width: 64px;
  height: 48px;
  border-right: 1px solid #ECECEC;
}
.report-sale-item-money {
  height: 46px;
  width: 96px;
  border-right: 1px solid #ECECEC;
  margin-left: 16px;
}
.report-sale-item-profit {
  height: 46px;
  width: 96px;
  margin-left: 16px;
}
</style>